<template>
    <div>
        <el-row style="margin-top: 20px;">
            <el-image :src="page.userInfoImg" style="margin-right: 900px;" width="60px" height="60px"></el-image>
        </el-row>

        <el-upload style="margin-right: 900px;" class="upload-demo" action="#" :http-request="uploadImage" :on-preview="handlePreview"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
            :file-list="fileList" :on-success="afterUpload">
            <el-button size="small" type="primary">修改头像</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">姓名：</span>
                <el-input placeholder="姓名" v-model="page.userRealName" clearable>
                </el-input>

            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">身份证：</span>
                <el-input placeholder="身份证" v-model="page.userInfoCard" clearable>
                </el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">昵称：</span>
                <el-input placeholder="昵称" v-model="page.userInfoName" clearable>
                </el-input>
            </el-col>
        </el-row>


        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">年龄：</span>
                <el-input placeholder="年龄" v-model="page.userInfoAge" clearable>
                </el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="6">
                <span class="input-label">电话：</span>
                <el-input placeholder="电话" v-model="page.userInfoTel" clearable>
                </el-input>
            </el-col>
        </el-row>

        <el-row style="margin-left: -1190px; margin-top: 20px;">
            <el-button type="primary" @click="showdialog">
                修改
            </el-button>
        </el-row>

        <el-dialog :visible.sync="dialogVisible" title="修改">
            <el-input v-model="input1" placeholder="请输入电话"></el-input>
            <el-input v-model="input2" placeholder="请输入昵称"></el-input>
            <el-button type="primary" @click="updateuserinfo">
                确认修改
            </el-button>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "UserInfo",
    data() {
        return {
            input1: '',
            input2: '',
            dialogVisible: false,
            userinfoname: "",
            userinfotel: "",
            fileList: [],
            page: {},
        }
    },
    methods: {
        showdialog() {
            this.dialogVisible = true
        },
        updateuserinfo() {
            this.$http.get("/user/userInfo/updateUserInfo",
                {
                    params: {
                        userinfoname: this.input2,
                        userinfotel: this.input1
                    }
                }
            ).then(resp => {
                alert(resp.data.message)
                this.dialogVisible = false
                this.input1 = ""
                this.input2 = ""
                this.loadAllUserinfo()
            })
        },
        loadAllUserinfo() {
            this.$http.get("/user/userInfo/loadAllUserinfos",
            ).then(resp => {
                this.page = resp.data.data;
            })
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        afterUpload(response, file, fileList) {
            console.log(response)
        },
        handlePreview(file) {
            console.log(file);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        uploadImage(e) {
            let formData = new FormData()
            formData.append("image", e.file)
            this.$http.post("/user/userInfo/uploadImage", formData, {
                "Content-Type": "multipart/form-data"
            }).then(resp => {
                alert(resp.data.message)
                this.page.userInfoImg = resp.data.data
                this.loadAllUserinfo()
                this.beforeRemove()
            })
        }
    },
    created() {
        this.loadAllUserinfo()
    }
}
</script>

<style scoped></style>